<template>
    <!--数据展示屏 组件-->
    <div
        class="full-screen flex-column"
    >
        <!--标题-->
        <el-row style="height: 100px;">
            <el-col :span="8" class="flex" style="align-items: center;">
                <!--<el-image-->
                    <!--style="width: 290px; height: auto;"-->
                    <!--:src="titleLeftImg">-->
                <!--</el-image>-->
                <dv-decoration-10 style="width:90%;height:5px;" />
            </el-col>
            <!--中间标题-->
            <el-col :span="8" style="text-align: center;">
                <div class="title-text">健康码大数据监控平台</div>
                <dv-decoration-5 style="height:40px;" />
            </el-col>

            <el-col :span="8" class="flex" style="justify-content: flex-end;padding-right: 24px;flex-wrap: nowrap;" >
                <div style="width:80px;height:80px;overflow: hidden;">
                    <dv-decoration-12 style="width:100%;height:100%;margin: 0;" />
                </div>
            </el-col>
        </el-row>

        <!--主内容-->
        <el-row :gutter="10" style="height: 0; flex:1;">
            <el-col :span="6" style="height: 100%;">
                <div class="flex-column" style="height: 100%;overflow: hidden;flex-wrap: nowrap;">
                    <div style="flex: 0 0 48%;">
                        <dv-border-box-11
                            title="实时监控"
                        >
                            <div style="width:100%;height:100%;padding: 58px 24px 35px 24px;">
                                <codeChangeLog />
                            </div>
                        </dv-border-box-11>
                    </div>
                    <div style="flex: 0 0 4%;">
                    </div>
                    <div style="flex: 0 0 48%;">
                        <dv-border-box-13>
                            <div class="flex-column" style="padding: 24px;">
                                <div class="chart-title">健康码访问量</div>
                                <CodeReqChart style=" flex: 1;" labelColor="#ffffff"/>
                            </div>
                        </dv-border-box-13>
                    </div>
                </div>
            </el-col>

            <!--中间地图区域-->
            <el-col :span="12" style="height: 100%;">
                <MapView />
            </el-col>

            <el-col :span="6" style="height: 100%;">
                <div class="flex-column" style="height: 100%;overflow: hidden;flex-wrap: nowrap;">
                    <div style="flex: 0 0 48%;">
                        <dv-border-box-1 >
                            <div class="flex-column" style="padding: 24px;">
                                <div class="chart-title">健康码颜色统计</div>
                                <HealthStateChart style=" flex: 1;" labelColor="#ffffff"/>
                            </div>
                        </dv-border-box-1>
                    </div>
                    <div style="flex: 0 0 4%;">
                    </div>
                    <div style="flex: 0 0 48%;">
                        <dv-border-box-9>
                            <div class="flex-column" style="padding: 24px;">
                                <div class="chart-title">注册用户</div>
                                <RegUserChart style=" flex: 1;" labelColor="#ffffff"/>
                            </div>
                        </dv-border-box-9>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!--底部信息-->
        <div style="height: 30px; color: #dddddd;text-align: center; align-items: flex-end;justify-content: center;" class="flex">
            <div>
                项目地址: <el-link type="primary" href="https://gitee.com/iszsq" target="_blank">https://gitee.com/iszsq</el-link> @copyright <el-link type="primary" href="https://gitee.com/iszsq" target="_blank">zsq</el-link>
            </div>
        </div>
    </div>
</template>

<script>
    import MapView from "./mapView/index";
    import codeChangeLog from "./codeChangeLog";
    // 健康码请求统计
    import CodeReqChart from "@/views/admin/charts/CodeReqChart.vue";
    import HealthStateChart from "@/views/admin/charts/HealthStateChart.vue";
    import RegUserChart from "@/views/admin/charts/RegUserChart.vue";

    export default {
        name: "index",
        components: {
            MapView, codeChangeLog,
            CodeReqChart, HealthStateChart, RegUserChart
        },
        data() {
            return {

            }
        }
    }
</script>

<style scoped>
    .full-screen{
        width: 100%;
        height: 100%;
        background: url("../../assets/bg.png") no-repeat;
        background-size:cover;
        padding: 12px;
        color: #ffffff;
    }

    .title-text{
        font-size: 28px;
        color: white;
        font-weight: bold;
        letter-spacing: .2em;
        user-select: none;
    }

    .chart-title{
        font-size: 16px;
        color: white;
        font-weight: bold;
        user-select: none;
        padding: 6px;
    }
</style>
